<template>
    <div class="page-body">
        <div class="form-body">
            <p style="font-size: 30px;">企业资质上传</p>
            <el-form :inline="true" style="margin-top: 30px;">
                <el-form-item label="公司名称:" :required="true">
                    <el-input v-model="companyData.companyName" style="width: 240px;"></el-input>
                </el-form-item>
                <el-form-item label="社会信用代码:" style="margin-left: 20px;" :required="true">
                    <el-input v-model="companyData.enterpriseCode" style="width: 240px;"></el-input>
                </el-form-item>
                <el-form-item label="营业执照:" :required="true">
                    <input type="file" ref="licenseUpload" @change="getLicenseHandle" style="display: none;" />
                    <el-button @click="licenseUploadHandle" v-if="!licenseUrl">上传营业执照</el-button>
                    <img v-else style="height: 100px;" :src="licenseUrl" />
                </el-form-item>
                <el-form-item label="hr在职证明:" style="margin-left: 30px;" :required="true">
                    <input type="file" ref="proveUpload" @change="getProveHandle" style="display: none;" />
                    <el-button @click="proveUploadHandle" v-if="!proveUrl">上传hr在职证明</el-button>
                    <img v-else style="height: 100px;" :src="proveUrl" />
                </el-form-item>
                <el-form-item label="公司图片:" style="margin-left: 30px;" :required="true">
                    <input type="file" ref="companyIconUpload" @change="getCompanyIconHandle" style="display: none;" />
                    <el-button @click="companyIconUploadHandle" v-if="!companyIconUrl">上传公司图片</el-button>
                    <img v-else style="height: 100px;" :src="companyIconUrl" />
                </el-form-item>
            </el-form>
            <div class="dialog-footer">
                <span slot="footer">
                    <el-button type="primary" @click="resetCompanyDataHandle">重 置</el-button>
                    <el-button type="success" @click="submitCompanyDataHandle">确 定</el-button>
                </span>
            </div>

        </div>


    </div>
</template>

<script>
import { submitCompanyDataQuery } from '@/api/hr'
export default {
    data() {
        return {
            companyData: {
                companyName: null,
                enterpriseCode: null,
                license: null,
                prove: null,
                companyIcon: null,
            },
            licenseUrl: null,
            proveUrl: null,
            companyIconUrl: null
        }
    },
    methods: {
        //打开营业执照选择框
        licenseUploadHandle() {
            this.$refs.licenseUpload.click()
        },
        //获取并展示营业执照
        getLicenseHandle() {
            const license = this.$refs.licenseUpload
            if (license.files && license.files.length > 0) {
                this.companyData.license = license.files[license.files.length - 1]
                if (this.companyData.license.type.startsWith('image/')) {
                    const reader = new FileReader()
                    reader.onload = (e) => {
                        this.licenseUrl = e.target.result
                    }
                    reader.readAsDataURL(this.companyData.license)
                }
            }
        },
        //打开hr在职证明选择框
        proveUploadHandle() {
            this.$refs.proveUpload.click()
        },
        //hr在职证明上传
        getProveHandle() {
            const prove = this.$refs.proveUpload
            if (prove.files && prove.files.length > 0) {
                this.companyData.prove = prove.files[prove.files.length - 1]
                if (this.companyData.prove.type.startsWith('image/')) {
                    const reader = new FileReader()
                    reader.onload = (e) => {
                        this.proveUrl = e.target.result
                    }
                    reader.readAsDataURL(this.companyData.prove)
                }
            }
        },
        //打开公司图片选择框
        companyIconUploadHandle() {
            this.$refs.companyIconUpload.click()
        },
        //公司图片上传
        getCompanyIconHandle() {
            const companyIcon = this.$refs.companyIconUpload
            if (companyIcon.files && companyIcon.files.length > 0) {
                this.companyData.companyIcon = companyIcon.files[companyIcon.files.length - 1]
                if (this.companyData.companyIcon.type.startsWith('image/')) {
                    const reader = new FileReader()
                    reader.onload = (e) => {
                        this.companyIconUrl = e.target.result
                    }
                    reader.readAsDataURL(this.companyData.companyIcon)
                }
            }
        },
        //重置企业资质审核数据
        resetCompanyDataHandle() {
            this.$confirm("是否重置公司信息？", {
                confirmButtonText: "确定重置",
                cancelButtonText: "取消重置"
            }).then(() => {
                this.companyData.companyName = null
                this.companyData.enterpriseCode = null
                this.companyData.license = null
                this.companyData.prove = null
                this.companyData.companyIcon = null
                this.licenseUrl = null
                this.proveUrl = null
                this.companyIconUrl = null
                if (this.$refs.companyIconUpload) {
                    this.$refs.companyIconUpload.value = '';
                }
                if (this.$refs.proveUpload) {
                    this.$refs.proveUpload.value = '';
                }
                if (this.$refs.licenseUpload) {
                    this.$refs.licenseUpload.value = '';
                }
                this.$message.success("重置成功！")
            })

        },
        //提交企业资质审核数据
        submitCompanyDataHandle() {
            this.$confirm("是否提交审核数据？", {
                confirmButtonText: "确认提交",
                cancelButtonText: "再做检查"
            }).then(() => {
                const formData = new FormData()
                formData.append("companyName", this.companyData.companyName)
                formData.append("enterpriseCode", this.companyData.enterpriseCode)
                formData.append("license", this.companyData.license)
                formData.append("prove", this.companyData.prove)
                formData.append("companyIcon", this.companyData.companyIcon)
                submitCompanyDataQuery(formData).then(res => {
                    if (res.code == 200) {
                        this.$message.success(res.data)
                        this.$router.push("/main/home")
                    }
                })
            })
        }
    }
}
</script>

<style scoped>
.page-body {
    text-align: center;
    background-color: skyblue;
    height: 100vh;
}

.form-body {
    display: inline-block;
    width: 750px;
    background-color: wheat;
    border-radius: 10px;
    margin-top: 100px;
    padding: 30px 20px;
}

.dialog-footer {
    margin-top: 50px;
}
</style>